<template>
  <el-container>
    <basic-crud v-model="formData" :option="option" businessUrl="/obj/statusController"> </basic-crud>
  </el-container>
</template>

<script setup>
import { nextTick } from 'vue';

const formData = ref({})
const option = {
  viewBtn: true,
  editBtn: true,
  searchSpan: 6,
  statusBtn: true,
  menuWidth: 220,
  column: [
    {
      label: '编号',
      prop: 'code',
      search: true,
      width: 180,
      rules: [{ required: true, message: '编号不能为空', trigger: 'blur' }],
    },
    {
      label: '名称',
      prop: 'name',
      width: 200,
      search: true,

      rules: [{ required: true, message: '名称不能为空', trigger: 'blur' }],
    },
    {
      label: '起始状态',
      prop: 'startStatusName',
      width: 200,
      placeholder: '请选择起始状态',
      component: 'BasicCrudTableSelect',
      dataType: 'statusMeta',
      curForm: formData,
      // 这里拿到最新的表单数据进行更新或者其他操作，例如选择参照后联动修改其他表单值
      change: (newV) => {
        nextTick(() => {
          formData.value = newV
          formData.value.startStatusName = newV.startStatusName
        })
      },
      comProps: {
        saveFieldMap: { startStatusName: 'name', startStatus: 'code' },
        selectedKey: 'code',
      },
      rules: [
        { required: true, message: '起始状态不能为空', trigger: ['blur', 'change'] },
      ],
    },
    {
      label: '类路径',
      prop: 'classFullName',
      search: true,
      width: 220,
      overHidden: true,

      clearable: true,
    },
    {
      label: '状态',
      prop: 'status',
      type: 'select',
      width: 80,
      search: true,
      statusTag: true,
      display: false,
    },
    {
      label: '描述',
      prop: 'des',
      search: true,
      minWidth: 200,
      type: 'textarea',
      span: 24,
    },
  ],
}
</script>

<style lang="scss" scoped></style>
